<template>
  <div id="qcoutcontrolrecDiv">
    <Breadcrumb content="失控记录" />
    <div class="bodyContent">
      <el-container>
        <el-aside width="820px" style="background-color: #fff !important;">
          <div class="iqcOutControl">
            <el-scrollbar style="height: 100%">
              <QcOutControlRecChart ref="qcOutControlRecChartRef" />
            </el-scrollbar>
          </div>
        </el-aside>
        <el-main>
          <vxe-toolbar perfect>
            <template #buttons>
              <el-form :model="searchForm" label-width="70px" class="form-input-m" :inline="true">
                <el-form-item label="工作组">
                  <SelectWorkGroup :url="'/api/rptGroup/findRptGroup'" @getSelectedId="getSelectedId"></SelectWorkGroup>
                </el-form-item>
                <el-form-item label="记录时间">
                  <el-date-picker v-model="searchForm.operateDateBeginEnd" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right" :default-time="defaultTime2" @change="operateDateChange">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" plain @click="operateDateChange()">查询</el-button>
                </el-form-item>
              </el-form>
            </template>
          </vxe-toolbar>

          <div class="tableBody" :style="{ height: tableBodyHeight }">
            <vxe-table ref="recTableRef" class="mytable-scrollbar" border="inner" align="center" height="auto" :data="recList" :loading="tloading" @current-change="recRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column field="code" title="编码" width="220"> </vxe-column>
              <vxe-column field="operateDate" title="日期" width="180"> </vxe-column>
              <vxe-column field="rptGroupName" title="工作组" width="130"> </vxe-column>
              <vxe-column field="itemDictName" title="项目" width="130"> </vxe-column>
              <vxe-column field="instrName" title="仪器"> </vxe-column>
            </vxe-table>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted, computed } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { DateToString, formatDateTime } from '@/utils/common';
import { AppStore } from '../../../stores/store';
import { isEmpty } from 'lodash';
import QcOutControlRecChart from './QcOutControlRecChart.vue';
import SelectWorkGroup from '@/views/lab_sys/lab_bus/components/SelectWorkGroup.vue'; //报告单元引入下拉组件
let { proxy }: any = getCurrentInstance();
let qcOutControlRecChartRef: any = ref(null);

let useSize = ref(localStorage.getItem('uiSize')); //当前选择的三个尺寸
const tableBodyHeight = computed(() => {
  if (useSize.value === 'small') {
    return 'calc(100% - 40px)';
  } else if (useSize.value === 'default') {
    return 'calc(100% - 50px)';
  } else {
    return 'calc(100% - 57px)';
  }
});

let searchForm = reactive({
  rptGroup: '',
  operateDateBeginEnd: [formatDateTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30), 'yyyy-MM-dd 00:00:00'), formatDateTime(new Date(), 'yyyy-MM-dd 23:59:59')] //记录时间段
});
let tloading = ref(false); //加载状态
let recList: any = reactive([]); //质控规则列表表格
const defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];

// 下拉报告单元获取报告单元id
function getSelectedId(propValue: any) {
  searchForm.rptGroup = propValue.value;
  findIQCOutControlRecList();
}

// 查询时间改变
function operateDateChange() {
  if (isEmpty(searchForm.rptGroup)) {
    VxeMessage('请选择工作组', VxeNotifyType.error);
    return;
  }
  findIQCOutControlRecList();
}
function findIQCOutControlRecList() {
  tloading.value = true;
  recList.length = 0; //放入数据前清空数据
  const url = '/api/qc/qcOutControlRec/getOutControlRecList';
  const data = {
    rptGroup: searchForm.rptGroup,
    operateDateS: searchForm.operateDateBeginEnd[0] ? formatDateTime(searchForm.operateDateBeginEnd[0], 'yyyy-MM-dd hh:mm:ss') : null,
    operateDateE: searchForm.operateDateBeginEnd[1] ? formatDateTime(searchForm.operateDateBeginEnd[1], 'yyyy-MM-dd hh:mm:ss') : null
  };
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: data })
    .then((res: any) => {
      recList.push(...res.data);
      tloading.value = false;
      if (recList.length > 0) {
        recRowClick({ row: recList[0] }); //默认选中第一条数据
      } else {
        qcOutControlRecChartRef.value.initClearDetaAll();
      }
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

// 点击设计模式表格当前行触发右侧表单变化
function recRowClick({ row }: any) {
  if (isEmpty(row)) {
    qcOutControlRecChartRef.value.initClearDetaAll();
  } else {
    (proxy.$refs.recTableRef as any).setCurrentRow(row);
    qcOutControlRecChartRef.value.initPageByRecId(row.id);
  }
}
</script>

<style lang="scss" scoped>
#qcoutcontrolrecDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .el-main {
      .el-form--inline .el-form-item {
        margin-right: 10px;
      }

      .el-form-item--small {
        margin: 5px;
      }

      .el-form-item--default {
        margin: 5px;
      }

      .el-form-item--large {
        margin: 5px;
      }

      // 时间选择器的宽度
      :deep(.el-date-editor.el-input__wrapper) {
        width: 336px;
      }
    }
  }
}
</style>
